<template>
  <!-- 第二个上传 -->
  <div>
    <h4 
      v-show="isShowUpload"
      style="text-align: center;"
    >{{$t('page.entrance2')}}</h4>
    <el-upload 
      ref="uploadFile2"
      class="upload-demo"
      v-show="isShowUpload"
      drag
      action="aa"
      name="excel"
      accept=".zip"
      :limit="1"
      :before-upload="beforeUpload"
      :headers="headerUpload"
      :http-request="UploadImage"
      :on-remove="handleRemove"
      :show-file-list="false"
      :on-error="handleError"
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
    </el-upload>
    
    <div class="reset-back"
      v-if="isShowStepOne">
        <!-- 修改数据 -->
      <div class="link"
        @click="changLogData">{{$t('page.modData')}}</div>
        <!-- 清空数据 -->
      <span class="link"
        @click="handleRemove">{{$t('page.emptyData')}}</span>
    </div>
    <div class="upload-name-box">
      <!-- 上传文件名字 -->
      <div class="upload-name"
        v-show="isShowUploadtxt">
        {{uploadFile.name }}
        <el-button type='text'
          @click="handleRemove()">x</el-button>
      </div>
      <!-- 加载进度条 -->
      <el-progress 
        :percentage="percentage"
        :color="customColor"
        v-show="isShowPer">
      </el-progress>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      isShowStepOne: false, // 修改、清空数据显示隐藏
      isShowUploadtxt: false, // 文件名字显示隐藏
      isShowUpload: true, // 上传文件框显示隐藏
      isShowPer: false, // 加载进度条显示隐藏
      customColor: '#e6a23c', // 进度条颜色
      percentage: 0,  // 进度条值
      uploadFile: {}, // 存储文件
    }
  },
  computed: {
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      if (localStorage.getItem('spr-lang') === 'en') {
        data.LANG = 'ENG' // 传语言
      }
      return data
    },
  },
  methods: {
    beforeUpload(file) {
      const isZip = file.name.endsWith('zip');
      if(!isZip) {
        return this.$message.error('上传文件仅支持zip格式')
      }
      this.uploadFile = file
      this.isShowPer = true   // 进度条
      this.isShowUpload = false  // 上传框隐藏
      this.isShowUploadtxt = true  // 显示文件名字
      this.percentage += 60 + Math.floor(Math.random() * 10)
    },

    UploadImage(data) {
      this.$emit('uploadExcel2', data.file)
      this.percentage = 100
      setTimeout(() => {
        this.isShowPer = false
      }, 500)
    },

    handleRemove() {
      this.$refs['uploadFile2'].clearFiles() //清除文件
      this.$emit('removeFile')
      this.uploadFile = {}
      //上传框
      this.isShowUpload = true
      this.isShowUploadtxt = false
      //上传进度条
      this.percentage = 0
      //显示进度
      this.isShowPer = false
      this.isShowStepOne = false
      this.isShowInputLog = false
      this.doDownload = false
      this.beforeLable = []
    },

    // 上传失败
    handleError() {
      this.$message.error('上传失败')
    },

    // 修改数据-点击出现弹窗
    changLogData() {
      this.isRepeatSubmit = true
      this.isShowInputLog = true
      this.doDownload = false
      this.beforeLable = []
    },
  }
}
</script>

<style>

</style>